<template>
  <view class="container">
    <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" :bottombar="false" :down="downOption" @up="upCallback" :up="upOption"
      :fixed="false" top="10">
      <view class="job-list">
        <view class="job-item" v-for="(item, index) in list" :key="item.id">
          <!-- 公司logo和基本信息 -->
          <view class="job-header">
            <view class="company-logo">
              <image :src="item.userAvatarUrl" class="logo-img"></image>
            </view>
            <view class="job-basic-info">
              <text class="job-title">{{ item.createUserName }}</text>
            </view>
          </view>
          <!-- 职位描述 -->
          <view class="job-description">
            <text class="description-text">{{ item.content }}</text>
          </view>

          <!-- 底部信息 -->
          <view class="job-footer">
            <view class="publish-info">
              <text class="publish-time">{{ item.createTime }}</text>
            </view>
            <view class="action-btns">
              <view class="btn-apply" @click.stop="applyJob(job)">
                <text class="apply-text">删除评价</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </mescroll-body>
  </view>
</template>

<script>
  import MescrollMixin from "@/libs/mescroll-uni/components/mescroll-uni/mescroll-mixins.js"

  export default {
    mixins: [MescrollMixin],
    data() {
      return {
        mescroll: null,
        downOption: {
          use: true,
          auto: true
        },
        upOption: {
          page: {
            num: 0,
            size: 20,
            time: null
          },
          empty: {
            use: true,
            icon: null,
            tip: "暂无数据",
            fixed: false,
            top: "560rpx",
          },
          textNoMore: '没有更多数据',
          toTop: {
            duration: 300,
            supportTap: false,
            btnClick: null
          }
        },
        listQuery: {
          page: 1,
          pageSize: 20,
          keyword: ''
        },
        list: [],
      }
    },
    methods: {
      // mescroll初始化
      mescrollInit(mescroll) {
        this.mescroll = mescroll
      },
      upCallback(options) {
        this.listQuery.page = options.num
        this.listQuery.pageSize = options.size
        // console.log(`正在加载${options.num}页数据`)
        this.fetchData()
      },
      // 下拉刷新的回调 (mixin默认resetUpScroll)
      downCallback() {
        this.listQuery.page = 1
        if (this.mescroll.optUp.use) {
          this.mescroll.resetUpScroll()
        } else {
          setTimeout(() => {
            this.mescroll.endSuccess()
          }, 500)
        }
      },
      mescrollInit(mescroll) {
        this.mescroll = mescroll
      },
      handleSearch() {
        this.mescroll.resetUpScroll()
      },
      fetchData() {
        uni.$u.http.get('/api/comment/UserList', { params: this.listQuery }).then(response => {
          let { code, message, result } = response.data
          if (code != 200) {
            this.mescroll.endErr()
            this.$u.toast(message)
            return
          }
          let { items, page, total, totalPages } = result
          if (result.page == 1) {
            this.list = new Array()
          }
          this.list = this.list.concat(items)
          console.log(items)
          this.mescroll.endSuccess(items.length, page < totalPages)
        }).catch(err => {
          console.error('获取招聘信息失败:', err)
          this.mescroll.endErr()
        })
      },
      handleSearch() {
        this.mescroll.resetUpScroll()
      },
      handleNavInfo(item) {
        this.$u.route({
          url: '/pages/zhaopin/detail',
          params: {
            id: item.id
          }
        })
      },
      // 收藏/取消收藏
      toggleCollect(job, index) {
        this.list[index].isCollected = !this.list[index].isCollected
        const action = this.list[index].isCollected ? '收藏' : '取消收藏'
        uni.showToast({
          title: `${action}成功`,
          icon: 'success'
        })
      },

      // 申请职位
      applyJob(job) {
        console.log('申请职位:', item.title)
        uni.showToast({
          title: '申请成功',
          icon: 'success'
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .sticky {
    background-color: #FFF !important;
    padding: 10upx;
    z-index: 999;
  }

  .container {
    min-height: 100vh;
    background: linear-gradient(180deg, #f0f9ff 0%, #ffffff 100%);
  }


  .job-list {
    padding: 10rpx;

    .job-item {
      background: white;
      border-radius: 24rpx;
      padding: 32rpx;
      margin-bottom: 24rpx;
      box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
      border: 1rpx solid #f0f9ff;
      transition: all 0.3s ease;

      &:active {
        transform: translateY(2rpx);
        box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
      }
    }
  }

  .job-header {
    display: flex;
    align-items: flex-start;
    margin-bottom: 24rpx;

    .company-logo {
      width: 88rpx;
      height: 88rpx;
      border-radius: 16rpx;
      overflow: hidden;
      margin-right: 24rpx;
      background: #f8fafc;

      .logo-img {
        width: 100%;
        height: 100%;
      }
    }

    .job-basic-info {
      flex: 1;

      .job-title {
        display: block;
        font-size: 32rpx;
        font-weight: 600;
        color: #1e293b;
        margin-bottom: 8rpx;
      }

      .company-name {
        display: block;
        font-size: 26rpx;
        color: #64748b;
        margin-bottom: 16rpx;
      }

      .job-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 12rpx;

        .tag {
          background: #e0f2fe;
          color: #0369a1;
          font-size: 22rpx;
          padding: 8rpx 16rpx;
          border-radius: 20rpx;
        }
      }
    }

    .salary {
      .salary-text {
        font-size: 32rpx;
        font-weight: 600;
        color: #059669;
      }
    }
  }

  .job-details {
    display: flex;
    flex-wrap: wrap;
    gap: 24rpx;
    margin-bottom: 24rpx;

    .detail-item {
      display: flex;
      align-items: center;


      .detail-text {
        font-size: 24rpx;
        color: #64748b;
      }
    }
  }

  .job-description {
    margin-bottom: 24rpx;

    .description-text {
      font-size: 26rpx;
      color: #475569;
      line-height: 1.6;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
  }

  .job-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .publish-info {
      .publish-time {
        font-size: 22rpx;
        color: #94a3b8;
        margin-right: 16rpx;
      }

      .hr-name {
        font-size: 22rpx;
        color: #64748b;
      }
    }

    .action-btns {
      display: flex;
      align-items: center;
      gap: 16rpx;

      .btn-collect {
        width: 64rpx;
        height: 64rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .btn-apply {
        background: linear-gradient(135deg, #0ea5e9, #06b6d4);
        color: white;
        padding: 16rpx 32rpx;
        border-radius: 32rpx;

        .apply-text {
          font-size: 26rpx;
          font-weight: 500;
        }
      }
    }
  }
</style>